<template>
  <div class="update-psd">
    <div class="title-wrap">
      <RouteHeadLine />
    </div>
    <div class="data-wrap">
      <div class="out-wrap">
        <!-- <h3>单位名称：郑州市生态环境局</h3> -->
        <div class="psd">
          <span>输入原密码：</span> <el-input v-model="form.oldpwd"></el-input>
        </div>
        <div class="sure-psd">
          <span>输入新密码：</span> <el-input v-model="form.newpwd"></el-input>
        </div>
        <div class="sure-psd">
          <span>确认新密码：</span> <el-input v-model="newpwd"></el-input>
        </div>
        <div class="btn-wrap">
          <button class="save" @click="save">确认</button>
          <button class="del" @click="del">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import Dialog from "@/components/Dialog.vue";
import ElMessage from "@/components/ElMessage.js";
import { useRouter } from "vue-router";
import http from "@http";
let $router = useRouter();

let params = reactive({});
let handleSearch = () => {};
let total = ref(11);
let newpwd = ref("");
let showDialog = ref(false);
let form = reactive({ oldpwd: "", newpwd: "" });
let options = ref([
  { label: "佛挡杀", value: 2 },
  { label: "佛挡杀", value: 2 },
]);
let handleAudit = () => {
  showDialog.value = true;
};
let save = () => {
  if (form.oldpwd.trim() == "") {
    ElMessage({ msg: "请输入旧密码", type: "warning" });
    return;
  }
  if (form.newpwd.trim() == "" || newpwd.value.trim() == "") {
    ElMessage({ msg: "请输入新密码", type: "warning" });
    return;
  }
  if (newpwd.value != form.newpwd) {
    ElMessage({ msg: "两次密码输入不一致", type: "warning" });
    return;
  }
  http({ url: "/admPCUser/changepwd", data: form }).then((res) => {
    if (res.code == 0) {
      ElMessage({ msg: "修改密码成功,请重新登录", type: "success" });
      setTimeout(() => {
        $router.push("/login");
      }, 600);
    }
  });
};

let diaBack = () => {
  showDialog.value = false;
};
let diaSave = () => {};

let handleDelete = () => {};
</script>
<style lang="scss" scoped>
.update-psd {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .title-wrap {
    height: 76px;
    background: #ffffff;
    padding-top: 20px;
  }
  .data-wrap {
    height: calc(100vh - 76px - 80px);
    background-color: #fff;
    margin-top: 13px;
    flex-direction: column;
    display: flex;

    padding-top: 142px;
    padding-left: 543px;
    .out-wrap {
      width: 510px;
      h3 {
        height: 31px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 32px;
        color: #333333;
        text-align: center;
      }
      .psd {
        /* margin-top: 57px; */
      }
      .sure-psd {
        margin-top: 35px;
      }
      .btn-wrap {
        display: flex;
        margin-top: 70px;
        padding-left: 55px;
        .save,
        .del {
          width: 172px;
          height: 56px;
          background: #0874fa;
          border-radius: 28px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
        }
        .del {
          background: #ffffff;
          border-radius: 28px;
          border: 1px solid #cccccc;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 24px;
          color: #666666;
        }
        .del {
          margin-left: 48px;
        }
      }
      .psd,
      .sure-psd {
        display: flex;
        align-items: center;
        span {
          height: 25px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 26px;
          flex-shrink: 0;
          color: #333333;
        }
      }
    }
  }
  :deep(.el-input__wrapper) {
    width: 349px;
    height: 43px;
    background: #f5f7fb;
    border-radius: 4px;
    border: 1px solid #ccd3e1;
    font-size: 20px;
  }
  :deep(.el-input__wrapper:hover) {
    box-shadow: none;
  }
}
</style>
